<template>
  <view class="page-wrapper">
    <view class="block"></view>
    <view class="content-inner">
      <view class="content-wrapper">
        <yy-title title="车辆信息"></yy-title>
        <view class="ul-wrapper">
          <view class="u-item">
            <view class="u-label">
              送修原因:
            </view>
            <view class="u-value">
              {{form.faultDescribe}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              车辆牌照:
            </view>
            <view class="u-value">
              {{form.carNumber ? form.carNumber : '无'}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              车辆颜色:
            </view>
            <view class="u-value">
              {{form.carColor}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              车架号:
            </view>
            <view class="u-value">
              {{form.frameNumber ? form.frameNumber : '无'}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              发动机号:
            </view>
            <view class="u-value">
              {{form.engineNumber ? form.engineNumber : '无'}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              可疑车辆:
            </view>
            <view class="u-value">
              {{form.isSuspectedVehicle == '1' ? '是' : '否' }}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              图片证据:
            </view>
            <view class="u-value">
              <view class="img-wrapper" v-if="form.imageListUrl">
                <image class="img" v-for="(item, index) in form.imageListUrl" :key="index" :src="`${imgPrefix}${item}`"
                  @click="previewImage(form.imageListUrl)">
                </image>
              </view>
              <template v-else>无</template>
            </view>
          </view>
        </view>
      </view>
      <view class="content-wrapper">
        <yy-title title="送修人员信息"></yy-title>
        <view class="ul-wrapper">
          <view class="u-item">
            <view class="u-label">
              送修时间:
            </view>
            <view class="u-value">
              {{moment(form.sendRepairTime).format('YYYY/MM/DD HH:mm')}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              上报时间:
            </view>
            <view class="u-value">
              {{form.sendRepairEscalationTime}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              身份证号:
            </view>
            <view class="u-value">
              {{encryptIDCard(form.sendRepairIdcard)}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              人员姓名:
            </view>
            <view class="u-value">
              {{form.sendRepairName ? form.sendRepairName : '无'}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              手机号码:
            </view>
            <view class="u-value">
              {{form.sendRepairPhone ? form.sendRepairPhone : '无'}}
            </view>
          </view>
        </view>
      </view>
      <view class="content-wrapper">
        <yy-title title="取车人员信息"></yy-title>
        <view class="ul-wrapper">
          <view class="u-item">
            <view class="u-label">
              取车时间:
            </view>
            <view class="u-value">
              {{moment(form.takeTime).format('YYYY/MM/DD HH:mm')}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              上报时间:
            </view>
            <view class="u-value">
              {{form.takeEscalationTime}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              身份证号:
            </view>
            <view class="u-value">
              {{encryptIDCard(form.takeIdcard)}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              人员姓名:
            </view>
            <view class="u-value">
              {{form.takeName ? form.takeName : '无'}}
            </view>
          </view>
          <view class="u-item">
            <view class="u-label">
              手机号码:
            </view>
            <view class="u-value">
              {{form.takePhone ? form.takePhone : '无'}}
            </view>
          </view>
        </view>
      </view>
    </view>`
  </view>
</template>

<script>
  import {
    getOptionsParams,
    encryptIDCard
  } from '../../../utils/util'
  import moment from '@/utils/moment.js'

  export default {
    data() {
      return {
        imgPrefix: uni.getStorageSync("imgPrefix"),
        form: {}
      }
    },
    onLoad(options) {
      const detail = getOptionsParams(options)
      this.form = detail
    },
    methods: {
      moment,
      encryptIDCard,
      previewImage(imgUrl) {
        uni.previewImage({
          urls: imgUrl.map(item => {
            return `${this.imgPrefix}${item}`
          })
        })
      }
    }
  }
</script>

<style>
  page {
    background: #F9F9F9;
  }
</style>
<style lang="scss" scoped>
  .page-wrapper {
    position: relative;
    padding-top: 95rpx;
    display: flex;
    flex-direction: column;

    .block {
      width: 732rpx;
      height: 272rpx;
      background: linear-gradient(180deg, #51B1FF 0%, #1790F2 100%);
      border-radius: 0rpx 0rpx 52rpx 52rpx;
      margin: 0 auto;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    .content-inner {
      flex: 1;
      height: 0;
    }

    .content-wrapper {
      width: 702rpx;
      margin: 0 auto;
      position: relative;
      z-index: 10;
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 40rpx 20rpx;
      margin-bottom: 20rpx;
      padding-top: 10rpx;
    }

    .ul-wrapper {
      .u-item {
        display: flex;
        margin-top: 22rpx;
        padding-left: 15rpx;

        .u-label {
          width: 124rpx;
          flex-shrink: 0;
          margin-right: 14rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #999999;
          text-align: right;
        }

        .u-value {
          font-weight: bold;
          font-size: 28rpx;
          color: #101010;

          .img-wrapper {
            .img {
              width: 160rpx;
              height: 142rpx;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              margin-right: 10rpx;

              &:nth-child(3n) {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
</style>